<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>课程详情</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.min.js"></script>
</head>

<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">课程管理</a></li>
            <li><a href="#">课程详情</a></li>
        </ul>
    </div>
    <div class="formbody" id="box">
        <!-- 工具栏 -->
        <div class="tools">
            <ul class="toolbar">
                <li v-on:click="goback"><span><img src="/images/t04.png" /></span>返回</li>
            </ul>
        </div>
        <form id="uploadForm">
            <div class="formtitle"><span>审核文章</span></div>
            <ul class="forminfo">
                <li><label>课程ID</label><input name="cid" type="text" class="dfinput" readonly="readonly"
                        v-model="onecourse.cid" /></li>
                <li><label>课程标题</label><input name="title" type="text" class="dfinput" v-model="onecourse.title" /></li>
                <li><label>课程图片</label><img name="courseImage" style="width:100px;heigh:100px;"
                        v-bind:src="'/'+onecourse.courseImage" /></li>
                <li><label>报名人数</label><input name="personNumber" type="text" class="dfinput"
                        v-model="onecourse.personNumber" readonly="readonly" />
                </li>
                <li><label>课程售价</label><input name="money" type="text" class="dfinput" v-model="onecourse.money" /></li>
                <li><label>创建时间</label><input name="createdate" type="text" class="dfinput"
                        v-model="onecourse.createdate" readonly="readonly" /></li>
                <li><label>开始时间</label><input name="begindate" type="date" class="dfinput"
                        v-model="onecourse.begindate" /></li>
                <li><label>结束时间</label><input name="enddate" type="date" class="dfinput" v-model="onecourse.enddate" />
                </li>
                <li><label>内容</label><textarea name="content" type="text" class="dfinput"
                        v-model="onecourse.content"></textarea></li>
                <li><label>状态</label><input name="cstatus" type="text" class="dfinput" v-model="onecourse.cstatus" />
                </li>
                <li><label>备注</label><input name="remark" type="text" class="dfinput" v-model="onecourse.remark"></li>
            </ul>
            <input type="button" class="scbtn" id="updateButton" v-on:click="updateCourse" value="修改">
        </form>
    </div>

    <script>
        var paras = location.search; //search获得地址中的参数，内容为'?itemId=12'
        var temp = paras.split('=');
        var itemId = temp[1];
        var obj = {
            data () {
                return {
                    onecourse: {
                    }
                }
            },
            mounted () {
                axios({
                    method: 'get',
                    url: '/blog/course/root/one/' + itemId,
                }).then(function (result) {
                    vm.onecourse = result.data.data;
                    console.log(vm.onecourse);
                });
            },
            methods: {
                updateCourse () {
                    axios({
                        method: 'put',
                        url: '/blog/course/root/',
                        data: {
                            cid: vm.onecourse.cid,
                            title: vm.onecourse.title,
                            money: vm.onecourse.money,
                            begindate: vm.onecourse.begindate,
                            enddate: vm.onecourse.enddate,
                            content: vm.onecourse.content,
                            cstatus: vm.onecourse.cstatus,
                            remark: vm.onecourse.remark,
                        }
                    }).then(function (result) {
                        window.alert(result.data.msg);
                        if (result.data.code == 0) {
                            setTimeout(function () {
                                window.location.href = "/admin_course_manage/course_list.html";
                            }, 500);
                        }
                    });
                },
                goback () {
                    window.history.back();
                }
            }
        }
        var vm = Vue.createApp(obj).mount("#box")
    </script>

</body>

</html>